<template>
    <div class="hello">
        el-input + el-button + VEmojiPicker
        <el-form ref="form"  :model="form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="emoji" label="emoji">
                        <el-input v-model="form.emoji" placeholder="请输入" >
                            <template slot="append">
                                <el-button slot="reference" circle type="text" @click="showEmojiDialog=!showEmojiDialog">😃</el-button>

                            </template>
                        </el-input>
                        <VEmojiPicker v-show="showEmojiDialog" @select="selectEmoji" class="emoji-picker" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="emoji2" label="emoji2">
                        <el-input v-model="form.emoji2" placeholder="请输入" >
                            <template slot="append">
                                <el-button slot="reference" circle type="text" @click="showEmoji2Dialog=!showEmoji2Dialog">😃</el-button>
                            </template>
                            <VEmojiPicker v-show="showEmoji2Dialog" @select="selectEmoji2" class="emoji-picker" />
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="emoji3" label="emoji3">
                        <el-input v-model="form.emoji3" placeholder="请输入" >
                            <template slot="append">
                                <el-button slot="reference" circle type="text" @click="showEmoji3Dialog=!showEmoji3Dialog">😃</el-button>

                            </template>
                        </el-input>
                    </el-form-item>
                    <VEmojiPicker  v-show="showEmoji3Dialog" @select="selectEmoji3" class="emoji-picker" />
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="emoji4" label="emoji4">
                        <VEmojiPicker v-show="showEmoji4Dialog" @select="selectEmoji4" class="emoji-picker" />
                        <el-input v-model="form.emoji4" placeholder="请输入" >
                            <template slot="append">
                                <el-button slot="reference" circle type="text" @click="showEmoji4Dialog=!showEmoji4Dialog">😃</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item prop="group" label="分组">
                    <el-input v-model="form.group" placeholder="请输入" />
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld2',
    data() {
        return {
            showEmoji:false,
            form:{
                emoji:'',
                emoji2:'',
                emoji3:'',
                emoji4:'',
                group:'emoji选择框要关闭只能再点下 😃按钮,此方式不推荐,例如emoji2,选择框会顶出屏幕'
            },
            showEmojiDialog:false,
            showEmoji2Dialog: false,
            showEmoji3Dialog:false,
            showEmoji4Dialog: false,
        }
    },
    methods:{
        selectEmoji(emoji) {
            this.form.emoji=emoji.data
        },
        selectEmoji2(emoji) {
            this.form.emoji2=emoji.data
        },
        selectEmoji3(emoji) {
            this.form.emoji3=emoji.data
        },
        selectEmoji4(emoji) {
            this.form.emoji4=emoji.data
        },
    }
}
</script>
<style scoped>
.emoji-picker {
    position: absolute;
    z-index: 99999; /* 确保表情选择器在顶层 */
}
</style>
